<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0, user-scalable=no">
		<title></title>
		<style type="text/css">
			html,
			body {
				margin: 0;
				padding: 0;
				background: #FFFFFF;
				color: #333333;
			}
			/* 用户信息 */
			.userInfo{
				width: 100%;
				background: #000000;
				display: flex;
				flex-direction: column;
				align-items: center;
				margin-bottom: 3vw;
			}
			.userInfo img{
				width: 12vw;
				height: 12vw;
				border-radius: 50vw;
				margin-right: 5vw;
				border: 1px solid #F4CF89;
			}
			.userInfo>div:nth-child(1){
				width: 90%;
				display: flex;
				flex-direction: row;
				align-items: center;
				padding: 5vw 0;
			}
			.userInfo .name{
				color: #F4CF89;
			}
			.userInfo .grade{
				color: #999999;
				font-size: 3.6vw;
			}
			.userInfo .integral{
				width: 90%;
				height: 16vw;
				text-align: center;
				line-height: 16vw;
				color: #333333;
				background: #F4CF89;
				border-radius: 2vw 2vw 0 0;
			}
			/* 标题 */
			.tit{
				width: 90%;
				margin-left: 5%;
				font-weight: bold;
				padding: 0 0 3vw 0;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
			}
			.tit>div:nth-child(2){
				font-size: 3.2vw;
				color: #999999;
			}
			/* 九宫格 */
			.nav {
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
				width: 100%;
				background: white;
				padding: 2vw 0;
			}
			.nav .navLi {
				width: 25%;
				border-radius: 2vw;
				display: flex;
				flex-direction: column;
				align-items: center;
				margin-bottom: 3vw;
			}
			
			.nav .navLi>div:nth-child(1) {
				font-size: 4vw;
				margin-bottom: 1vw;
			}
			
			.nav .navLi>div:nth-child(2) {
				color: #999999;
				font-size: 3.2vw;
			}
			
			.nav .navLi img {
				width: 40%;
				margin-bottom: 1vw;
			}
			/* 兑换列表 */
			.content{
				width: 90%;
				margin: 0 auto;
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
				justify-content: space-between;
			}
			.list{
				width: 46.5%;
				background: #F4CF89;
				border-radius: 1vw;
				padding: 0 0.6vw 0.6vw 0.6vw;
				margin-bottom: 3vw;
				text-align: center;
			}
			.list>div:nth-child(1){
				padding: 1vw 0;
				font-size: 3.2vw;
				color: #9B7934;
				font-weight: bold;
			}
			.list>div:nth-child(2){
				background: #FCF4E9;
				border-radius: 0 0 0.6vw 0.6vw;
				padding: 3vw 0;
				display: flex;
				flex-direction: column;
				align-items: center;
			}
			.list .qName{
				width: 90%;
				font-weight: bold;
				color: #000000;
				font-size: 4.2vw;
				white-space: nowrap; 
			    overflow: hidden;
			    text-overflow:ellipsis;
			}
			.list .qPrice{
				color: #999999;
				font-size: 3.2vw;
				margin-top: 1.2vw;
			}
		</style>
	</head>
	<body>
		<!-- <div class="main">
			<div class="userInfo">
				<div>
					<img src="../imgs/asd11.png" >
					<div>
						<div class="name">名称</div>
						<div class="grade">等级</div>
					</div>
				</div>
				<div class="integral">当前积分为：0</div>
			</div>
			<div class="tit">
				<div>会员信息</div>
				<div></div>
			</div>
			<div class="nav">
				<div class="navLi jfBtn">
					<img src="../imgs/icon2.png">
					<div>我的积分</div>
				</div>
				<div class="navLi yhqBtn">
					<img src="../imgs/icon1.png">
					<div>我的券包</div>
				</div>
				<div class="navLi ddBtn">
					<img src="../imgs/icon3.png">
					<div>我的订单</div>
				</div>
				<div class="navLi kbBtn">
					<img src="../imgs/icon4.png">
					<div>支付宝卡包</div>
				</div>
			</div>
			<div class="tit">
				<div>会员专享权益</div>
				<div>更多></div>
			</div>
			<div class="content">
				<div class="list">
					<div>会员专享兑换</div>
					<div>
						<div class="qName">优酷月卡</div>
						<div class="qPrice">XX元+XX积分</div>
					</div>
				</div>
				<div class="list">
					<div>会员专享兑换</div>
					<div>
						<div class="qName">优酷月卡</div>
						<div class="qPrice">XX元+XX积分</div>
					</div>
				</div>
				<div class="list">
					<div>会员专享兑换</div>
					<div>
						<div class="qName">优酷月卡</div>
						<div class="qPrice">XX元+XX积分</div>
					</div>
				</div>
			</div>
		</div> -->
		<script type="text/html" id="main">
			<div class="userInfo">
				<div>
					<img src="../imgs/defaultImg.png" >
					<div>
						<div class="name">{{member.aliNickName}}</div>
						<div class="grade">{{member.mobile}}</div>
<!--						<div class="grade">等级</div>-->
					</div>
				</div>
				<div class="integral">当前积分为：{{member.integral}}</div>
			</div>
			<div class="tit">
				<div>会员信息</div>
				<div></div>
			</div>
			<div class="nav">
				<div class="navLi" deta-url="./integral.html">
					<img src="">
					<div>测试</div>
				</div>
				{{each grids value index}}
				<div class="navLi" deta-url="{{value.transUrl}}">
					<img src="{{value.fileUrl}}">
					<div>{{value.name}}</div>
				</div>
				{{/each}}
				<!-- <div class="navLi">
					<img src="../imgs/icon2.png">
					<div>积分详情</div>
				</div>
				<div class="navLi jfBtn">
					<img src="../imgs/icon2.png">
					<div>积分规则</div>
				</div>
				<div class="navLi yhqBtn">
					<img src="../imgs/icon1.png">
					<div>我的券包</div>
				</div>
				<div class="navLi ddBtn">
					<img src="../imgs/icon3.png">
					<div>我的订单</div>
				</div>
				<div class="navLi kbBtn">
					<img src="../imgs/icon4.png">
					<div>支付宝卡包</div>
				</div>
				<div class="navLi">
					<img src="../imgs/icon2.png">
					<div>入会礼</div>
				</div>
				<div class="navLi">
					<img src="../imgs/icon3.png">
					<div>在线客服</div>
				</div> -->
			</div>
			<div class="tit">
				<div>会员专享权益</div>
				<!-- <div>更多></div> -->
			</div>
			<div class="content">
				{{each list[0].productList value index}}
					<div class="list" deta-id='{{value.id}}'>
						<div>会员专享兑换</div>
						<div>
							<div class="qName">{{value.productName}}</div>
							{{if value.amount > 0 && value.amount2 <= 0}}
							<div class="qPrice">{{value.amount}}元</div>
							{{/if}}
							{{if value.amount > 0 && value.amount2 > 0}}
							<div class="qPrice">{{value.amount}}元+{{value.amount2}}积分</div>
							{{/if}}
							{{if value.amount <= 0 && value.amount2 > 0}}
							<div class="qPrice">{{value.amount2}}积分</div>
							{{/if}}
							{{if value.amount == 0 && value.amount2 == 0}}
								<div class="qPrice">免费领取</div>
							{{/if}}
							<!-- <div class="qPrice">XX元+XX积分</div> -->
						</div>
					</div>
				{{/each}}
				<!-- <div class="list">
					<div>会员专享兑换</div>
					<div>
						<div class="qName">优酷月卡</div>
						<div class="qPrice">XX元+XX积分</div>
					</div>
				</div> -->
			</div>
			</div>
		</script>
		<div class="main"></div>
		<script src="../js/jq.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/public.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/template-web.js" type="text/javascript" charset="utf-8"></script>
	</body>
	<script type="text/javascript">
		$(function() {
			function GetQueryString(name) {
				var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
				var r = window.location.search.substr(1).match(reg);
				if (r != null) return unescape(r[2]);
				return null;
			}
			if (!sessionStorage.getItem('token')) {
				if (GetQueryString("auth_code") && GetQueryString("customer_code")) {
					myAjax('get', '/api/alipay/h5Login', {
						authCode: GetQueryString("auth_code"),
						customerCode: GetQueryString("customer_code")
					}, function(res) {
						if (res.code == 200) {
							sessionStorage.setItem('token', res.data.token); //保存
							myAjax('get', '/api/alipay/getListByType', {
								activityType: 3
							}, function(res) {
								if (res.code == 200) {
									var html = template('main', res.data);
									$(".main").append(html);
								} else {
									alert(res.data)
								}
							})
						} else {
							alert(res.data)
						}
						$('.loading').hide()
					})
				}
			} else {
				myAjax('get', '/api/alipay/getListByType', {
					activityType: 3
				}, function(res) {
					if (res.code == 200) {
						var html = template('main', res.data);
						$(".main").append(html);
					} else {
						alert(res.data)
					}
					$('.loading').hide()
				})
			}
			$('.main').on('click','.navLi',function(){//九宫格按钮点击
				window.location.href = $(this).attr('deta-url')
			})
	
	
			$('.main').on('click', '.list', function() { //商品点击
				window.location.href = "goodsDetails.html?id=" + $(this).attr('deta-id');
			})
		})
	</script>
</html>
